<!DOCTYPE html>
<!-- saved from url=(0038)setting.html -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>个人设置</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./css/mui.min.css" rel="stylesheet">
		<link href="./css/setting.css" rel="stylesheet">
		<link href="./css/form2.css" rel="stylesheet">
		<style type="text/css" abt="234"></style>
		<style type="text/css"></style>
		<style type="text/css">
			object,
			embed {
				-webkit-animation-duration: .001s;
				-webkit-animation-name: playerInserted;
				-ms-animation-duration: .001s;
				-ms-animation-name: playerInserted;
				-o-animation-duration: .001s;
				-o-animation-name: playerInserted;
				animation-duration: .001s;
				animation-name: playerInserted;
			}
			
			@-webkit-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-ms-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-o-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人设置</h1>
		</header>
		<div id="app" class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="form">
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">真实姓名</span>
							<a href="setting.html#modal1"><span id="name" class="mui-col-sm-7 mui-col-xs-7">{{user_info.realName}}</span></a>
						</div>
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">身份证号码</span>
							<a href="setting.html#modal1"><span id="idcard" class="mui-col-sm-7 mui-col-xs-7">{{user_info.idCode}}</span></a>
						</div>
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">昵称</span> <span class="mui-col-sm-7 mui-col-xs-7"><a href="setting.html#modal2"><span id="nickName">{{user_info.nickName}}</span> <span class="mui-icon mui-icon-compose mui-pull-right textcolor"></span></a>
							</span>
						</div>
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">手机号码</span> <span class="mui-col-sm-7 mui-col-xs-7"><a href="setting.html#modal3"><span id="mobilenum"></span> {{user_info.mobile}}<span class="mui-icon mui-icon-compose mui-pull-right textcolor"></span></a>
							</span>
						</div>
						<!--
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">邮箱</span> <span class="mui-col-sm-7 mui-col-xs-7"><a href="setting.html#modal4"><span id="email"></span> <span class="mui-icon mui-icon-compose mui-pull-right textcolor"></span></a>
							</span>
						</div>
							<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">紧急联系人</span> <span class="mui-col-sm-7 mui-col-xs-7"><a href="setting.html#modal6"><span id="contact">()</span> <span class="mui-icon mui-icon-compose mui-pull-right textcolor"></span></a>
								</span>
							</div>
						-->
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">地址</span> <span class="mui-col-sm-7 mui-col-xs-7"><a href="setting.html#modal5"><span id="address"></span>{{user_info.areaProvince}} {{user_info.areaCity}} {{user_info.areaName}} <span class="mui-icon mui-icon-compose mui-pull-right textcolor"></span></a>
							</span>
						</div>
						<div class="mui-row"><span class="mui-col-sm-5 mui-col-xs-5">修改密码</span> <span class="mui-col-sm-7 mui-col-xs-7"><a href="setting.html#modal8"><span id="password"></span> <span class="mui-icon mui-icon-compose mui-pull-right textcolor"></span></a>
							</span>
						</div>
							<div class="mui-button-row">
								<button type="button" onclick="exit();" id="btn_join_family" style="width: 100%;" class="mui-btn mui-btn-warning bgcolor mui-pull-center"><font color="white">退出</font></button>
							</div>
					</div>
				</div>
			</div>
		</div>

		<!--弹框1 提示不能修改-->
		<div id="modal1" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<span class="mui-icon mui-icon-info textcolor"></span>
				<p>为保证互助公平</p>
				<p><span class="textcolor">真实姓名／身份证</span>无法修改</p>
				<p>如输入有误，请联系客服</p>
				<p class="textcolor">400-997-7925</p>
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">确认</button>
			</div>
		</div>
		<!--//弹框1-->
		<!--弹框2 输入框一个-->
		<div id="modal2" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<input type="text" class="" placeholder="请设置您的昵称" id="text_nickName" maxlength="6" :value="user_info.nickName">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_nickName">确认</button>
			</div>
		</div>
		<!--//弹框2-->
		<!--弹框3 电话号码验证码-->
		<div id="modal3" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<div style="position: relative;">
					<input type="text" class="" id="mobile" placeholder="填写手机号">
					<button type="button" class="send-btn" onclick="sendcode()">发送</button>
				</div>
				<input type="text" class="" id="code" placeholder="输入验证码">
				<div class="tip textcolor">
					*如收不到验证码，请联系400-997-7925
				</div>
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_updatePass">确认</button>
			</div>
		</div>
		<!--//弹框3-->
		<!--弹框4 输入框一个邮箱-->
		<div id="modal4" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<input type="email" class="" placeholder="请设置您的邮箱地址" id="text_email" :value="user_info.email">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_email">确认</button>
			</div>
		</div>
		<!--//弹框4-->
		<!--弹框5 输入框一个地址-->
		<div id="modal5" class="mui-popover">
			<div class="modal-content">
				<form class="mui-input-group" id="addFamilyForm">
					<div class="mui-input-row">
							<select id="provinceSelect" onchange="showCitySelect(this.value);">
								<option value="">请选择省份</option>
							</select>
						</div>
					<div class="mui-input-row">
							<select id="citySelect" onchange="showSubCitySelect(this.value);">
								<option value="">请选择城市</option>
							</select>
						</div>
					<div class="mui-input-row">
							<select id="subCitySelect">
								<option value="">请选择区县</option>
							</select>
						</div>	
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_address">确认</button>
				</form>	
			</div>
		</div>
		<!--//弹框5-->
		<!--弹框6 紧急联系人-->
		<div id="modal6" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<input type="text" class="" placeholder="请输入联系人称呼" id="text_emergency_contact_name" :value="user_info.emergency_contact_name">
				<input type="text" class="" placeholder="请输入联系人手机号" id="text_emergency_contact_telmobile" :value="user_info.emergency_contact_telmobile">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_emergency_contact">确认</button>
			</div>
		</div>
		<!--//弹框6-->

		<!-- 密码修改 -->
		<div id="modal8" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<input type="password" class="" placeholder="密码" id="text_password">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_password">确认</button>
			</div>
		</div>
		<!--//弹框7-->

		<div id="modal9" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<input type="text" class="" placeholder="请输入您的真实姓名" id="text_realname" :value="user_info.realname">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_realname">确认</button>
			</div>
		</div>

		<div id="modal10" class="mui-popover">
			<span class="modal-close mui-pull-right" id="close"><span class="mui-icon mui-icon-closeempty"></span></span>
			<div class="modal-content">
				<input type="text" class="" placeholder="请输入您的身份证号码" id="text_idcard" :value="user_info.idcard">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined" id="btn_save_user_idcard">确认</button>
			</div>
		</div>

		<script src="./js/mui.js"></script>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript">
			var appUser = JSON.parse(localStorage.appUser);
			var user_id = appUser.id;
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var vue = new Vue({
				el: "#app",
				data: {
					user_info: [],
					ticket: ""
				}
			});
			mui(".mui-popover").on("tap", ".modal-close", function() {
				mui('#modal1').popover('hide');
				mui('#modal2').popover('hide');
				mui('#modal3').popover('hide');
				mui('#modal4').popover('hide');
				mui('#modal5').popover('hide');
				mui('#modal6').popover('hide');
				mui('#modal7').popover('hide');
				mui('#modal8').popover('hide');
				mui('#modal9').popover('hide');
				mui('#modal10').popover('hide');
				/*alert("111");*/
			})
			mui(".modal-content").on("tap", ".mui-btn", function() {
				mui('#modal1').popover('hide');
				mui('#modal2').popover('hide');
				mui('#modal3').popover('hide');
				mui('#modal4').popover('hide');
				mui('#modal5').popover('hide');
				mui('#modal6').popover('hide');
				mui('#modal7').popover('hide');
				mui('#modal8').popover('hide');
				mui('#modal9').popover('hide');
				mui('#modal10').popover('hide');
				/*alert("111");*/
			})

			mui.plusReady(function() {
				get_user_info();
			})

			window.onload = load();

			function load() {
				get_user_info();
			}
			
			function showAreaInfoList(grade,pId,id){
				var url = root + "myCenter/selectAreaInfoList";
				var html='';
				mui.get(url, {
						grade: grade,
						pId:pId
					},
					function(result) {
						for(var i=0;i<result.data.length;i++){
								if(id==result.data[i].id){
									html+="<option selected='selected' value='"+result.data[i].id+"'>"+result.data[i].name+"</option>";
								}else{
									html+="<option value='"+result.data[i].id+"'>"+result.data[i].name+"</option>";
								}
							}
						if(grade==1){
							$("#provinceSelect").append(html);
						}else if(grade==2){
							$("#citySelect").append(html);
						}else{
							$("#subCitySelect").append(html);
						}
					}, 'json');
			}
			/**
			 * 城市数据
			 * @param {Object} provinceId
			 */
			function showCitySelect(provinceId){
				$("#citySelect").html("");
				var url = root + "myCenter/selectAreaInfoList";
				var html='<option value="">请选择城市</option>';
				mui.get(url, {
						grade: 2,
						pId:provinceId
					},
					function(result) {
						if(result.data.length==0){
							mui.alert("该省份下的营业部还未开放，请选择其他省份");
							return;
						}
						for(var i=0;i<result.data.length;i++){
								html+="<option value='"+result.data[i].id+"'>"+result.data[i].name+"</option>";
							}
						$("#citySelect").append(html);
					}, 'json');
			}
			/**
			 * 区域数据
			 * @param {Object} cityId
			 */
			function showSubCitySelect(cityId){
				$("#subCitySelect").html("");
				var url = root + "myCenter/selectAreaInfoList";
				var html='<option value="">请选择区县</option>';
				mui.get(url, {
						grade: 3,
						pId:cityId
					},
					function(result) {
						for(var i=0;i<result.data.length;i++){
								html+="<option value='"+result.data[i].id+"'>"+result.data[i].name+"</option>";
							}
						$("#subCitySelect").append(html);
					}, 'json');
			}

			function get_user_info() {
				var url = root + "myCenter/detailAppUser";
				mui.get(url, {
						appUserId: user_id
					},
					function(result) {
						vue.user_info = result.data;
						showAreaInfoList(1,0,isNull(vue.user_info.areaProvinceId)?0:vue.user_info.areaProvinceId);
						showAreaInfoList(2,
							isNull(vue.user_info.areaProvinceId)?0:vue.user_info.areaProvinceId,
							isNull(vue.user_info.areaCityId)?0:vue.user_info.areaCityId);
						showAreaInfoList(3,
							isNull(vue.user_info.areaCityId)?0:vue.user_info.areaCityId,
							isNull(vue.user_info.areaId)?0:vue.user_info.areaId);
					}, 'json');
			}
			
			function exit(){
				var btnArray = ['确认', '取消'];
						    mui.confirm('确定要退出吗？', '', btnArray, function(e) {
						        if (e.index == 0) {
						        	localStorage.removeItem("appUser");
						            mui.openWindow("login.html", '', {});
						        }
						    });
			}

		
		</script>
		<script type="text/javascript">
			/*验证*/

			function checkEmail(str) {
				if(!str) {
					mui.toast('不能为空');
					return false;
				}
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
				if(reg.test(str)) {
					return true;
				} else {
					mui.toast('邮箱格式错误');
					return false;
				}
			}

			function checkContact(n, p) {
				if(n == null || "" == n || p == null || "" == p) {
					mui.toast("不能为空");
					return false;
				}
				var reg = /^1\d{10}$/;
				if(reg.test(p)) {
					//console.log('true');
					return true;
				} else {
					mui.toast('手机号码格式错误');
					return false;
				}
			}

			function checkPassword(p) {
				var patrn = "";
				if(n == null || "" == n || p == null || "" == p) {
					mui.toast("不能为空");
					return false;
				}
				var reg = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){6,12}$/;
				if(reg.test(p)) {
					//console.log('true');
					return true;
				} else {
					mui.toast('手机号码格式错误');
					return false;
				}
			}
			/*//验证*/
			btn_save_user_nickName.addEventListener('tap', function() {

				var nickName = text_nickName.value;
				if(nickName == null || nickName == "") {
					mui.toast("昵称不能为空");
					return false;
				}
				var url = root + 'myCenter/updateAppUserInfo';
				mui.post(url, {
					id: user_id,
					nickName: nickName
				}, function(result) {
					var status = result.status;
					if(status == "success") {
						mui.toast("修改成功");
						get_user_info();
					} else {
						mui.toast("修改失败");
					}
				}, 'json');

			});

			function sendcode() {
				var mobile = document.getElementById("mobile").value;

				//alert(mobile);
				if("" == mobile || undefined == mobile) {
					mui.alert("请输入手机号！");
				} else {
					var url = root + 'index/getSMSCode';
					mui.post(url, {
						mobile: mobile
					}, function(data) {
						var result = data.status;
						//alert(result);
						if(result == 'success') {
							mui.toast("发送成功");
						} else {
							mui.toast("验证不成功，请重新填写");
						}

					}, 'json');
				}
			}

			btn_updatePass.addEventListener('tap', function() {
				var mobile = document.getElementById("mobile").value;
				var code = document.getElementById("code").value;
				if(isNull(code)){
					mui.alert("请输入验证码");
					return;
				}
				var checkCodeResult=ajaxAction(root+"index/checkSMSCode",{mobile:mobile,code:code});
				if(checkCodeResult.status!='success'){
					mui.alert("验证码输入有误");
					return;
				}
				var url = root + 'myCenter/updateAppUserInfo';
				mui.post(url, {
					id: user_id,
					mobile: mobile,
					code: code
				}, function(result) {
					var status = result.status;
					if(status=='success'){
						mui.alert("修改成功");
						get_user_info();
					}else{
						mui.alert(result.msg);
					}
					/*if(status == "success") {
						getUsersinfoForSetting();
					} else if(result == 0) {
						mui.alert("系统出错");
					} else if(result == 2) {
						mui.alert("验证码输出错误");
					} else {
						mui.alert("用户没有登录");
					}*/
				}, 'json');
			})

			btn_save_user_email.addEventListener('tap', function() {
				var email = text_email.value;

				var url = root + "save_user_email";
				mui.post(url, {
					user_id: user_id,
					email: email
				}, function(data) {
					var code = data.code;
					if(code == 1) {
						mui.toast("修改成功");
						get_user_info();
					} else {
						mui.toast("修改失败");
					}
				}, 'json');
			})

			btn_save_user_address.addEventListener('tap', function() {
				var province = $("#provinceSelect").val();
				var city = $("#citySelect").val();
				var subCity = $("#subCitySelect").val();
				if(isNull(province)||isNull(city)) {
					mui.toast("区域信息必须填写完整");
					return false;
				}
				var url = root + "/myCenter/updateAppUserInfoAreaInfo";
				mui.post(url, {
					id: user_id,
					areaProvinceId: province,
					areaCityId: city,
					areaId: isNull(subCity)?0:subCity
				}, function(result) {
					var code = result.status;
					if(code == 'success') {
						mui.toast("修改成功");
						get_user_info();
					} else {
						mui.toast("修改失败");
					}
				}, 'json');
			})

			btn_save_user_emergency_contact.addEventListener('tap', function() {
				var emergency_contact_name = text_emergency_contact_name.value;
				var emergency_contact_telmobile = text_emergency_contact_telmobile.value;

				var url = root + "save_user_emergency_contact";
				mui.post(url, {
					user_id: user_id,
					emergency_contact_name: emergency_contact_name,
					emergency_contact_telmobile: emergency_contact_telmobile
				}, function(data) {
					var code = data.code;
					if(code == 1) {
						mui.toast("修改成功");
						get_user_info();
					} else {
						mui.toast("修改失败");
					}
				}, 'json');
			})

			btn_save_user_password.addEventListener('tap', function() {
				var password = text_password.value;
				if(password==''){
					mui.toast("密码不能为空");
					return false;
				}
				var url = root + "myCenter/updateAppUserInfo";
				mui.post(url, {
					id: user_id,
					password: password
				}, function(result) {
					var code = result.status;
					if(code == "success") {
						mui.toast("修改成功");
					} else {
						mui.toast("修改失败");
					}
				}, 'json');
			})

			btn_save_user_realname.addEventListener('tap', function() {
				var realname = text_realname.value;

				var url = root + "save_user_realname";
				mui.post(url, {
					user_id: user_id,
					realname: realname
				}, function(data) {
					var code = data.code;
					if(code == 1) {
						mui.toast("修改成功");
						get_user_info();
					} else {
						mui.toast("修改失败");
					}
				}, 'json');
			})

			btn_save_user_idcard.addEventListener('tap', function() {
				var idcard = text_idcard.value;

				var url = root + "save_user_idcard";
				mui.post(url, {
					user_id: user_id,
					idcard: idcard
				}, function(data) {
					var code = data.code;
					if(code == 1) {
						mui.toast("修改成功");
						get_user_info();
					} else {
						mui.toast("修改失败");
					}
				}, 'json');
			})

			/*
			btn_quite.addEventListener('tap', function() {
				localStorage.removeItem("user_id");
				mui.openWindow('name_login.html', 'name_login', {});
			});
			*/
		</script>

	</body>

</html>